<template>
  <home-header2/>
  <div class="part3">
    <div>
        <span class="s6">
           Our Services
        </span>
    </div>
    <div class="flex-container">
      <div class="flex-item">
        <img src="../assets/img/part301.png " alt="" class="part301" >
        <h3 class="part3-text">
          Fault Diagnosis
        </h3>
        <p class="s7">
          Users can use the csv file or indicator diagram file that is imported into the pc
          to carry out fault diagnosis, obtain the machine status and save it to the machine management page.
        </p>
        <router-link to="/discern2" class="link">Read more</router-link>
      </div>
      <div class="flex-item">
        <img src="../assets/img/part302.png " alt="" class="part301" >
        <h3 class="part3-text">
          Data Insights
        </h3>
        <p class="s7">
          Make statistical analysis of the data uploaded by users in the past month, and give suggestions.
        </p>
        <router-link to="/data2" class="link">Read more</router-link>
      </div>
      <div class="flex-item">
        <img src="../assets/img/part303.png " alt="" class="part301" >
        <h3 class="part3-text">
          Machinery Management
        </h3>
        <p class="s7">
          Store the incoming data and the diagnostic results classified by the model and follow up the troubleshooting progress.
        </p>
        <router-link to="/manage2" class="link">Read more</router-link>
      </div>
    </div>
  </div>
  <div class="part4">
        <span style="font-size:45px">
        Satisfied customer
        </span>
    <p class="s14">
      We provide an easy-to-use web platform for diagnosing and analyzing power graph images and data, providing fault results and real-time monitoring,
      all presented in a user-friendly interface with a cool blue color scheme.
    </p>
    <img src="../assets/img/part403.png" alt=""  class="part403" >
  </div>
  <home-footer2/>
</template>

<script>
import homeHeader2 from "@/components/layout2/homeHeader2";
import homeFooter2 from "@/components/layout2/homeFooter2";

export default {
  name: "service2",
  components:{
    homeHeader2,
    homeFooter2,
  },
}
</script>

<style scoped>
.part3{
  height: 700px;
  background-color:rgba(151, 171, 215, 0.12) ;

}

.s6{
  font-size: 40px;
  font-weight: normal;
  margin-left: 180px;
  position: relative;
  top:100px;
}
.flex-container {
  height: 250px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: 140px;
}

.flex-item {
  width: 30%;
  height: 400px;
  margin: 15px;
  float: left;
}
.part301{
  width: 330px;
  height: 330px;
}
.s7{
  font-size: 15px;
  color: #515a6e;
  position: relative;
  top:10px;
}
.link{
  color: #0062cc;
  position: relative;
  top:10px;
  font-size: 15px;
}
a{
  text-decoration: none;
}
.s14{
  width: 500px;
  font-size: 15px;
  color:#515a6e;
  margin-top: 20px;
  line-height: 25px;
}
.part3-text{
  font-weight: normal;
}
.part403{
  width: 650px;
  height: 450px;
  margin-left: 550px;
  margin-top: -220px;
  border-radius: 5px;
}
.part4{
  height: 500px;
  margin-left: 160px;
  margin-right: 160px;
  margin-top: 10px;
  position: relative;
  top:80px;
}

</style>